<template>
  <div class="home" ref="home">
    <div>
      <ly-tab
        v-model="selectedId"
        :items="items"
        :options="options"
        @change="change"
      >
      </ly-tab>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    name: 'Home',
    mounted () {
      this.$nextTick(() => {
        // this._initHomeScroll()
      })
    },
    data () {
      return {
        selectedId: 0,
        items: [
          { label: '热门' },
          { label: '女装' },
          { label: '百货' },
          { label: '鞋包' },
          { label: '食品' },
          { label: '母婴' },
          { label: '内衣' },
          { label: '电器' },
          { label: '男装' },
          { label: '家居' },
          { label: '水果' },
          { label: '手机' },
          { label: '美妆' },
          { label: '家纺' },
        ],
        options: {
          activeColor: '#E02D23'
        },
        urlList: [
          '/home/hot',
          '/home/women',
          '/home/goods'
        ]
      }
    },
    methods: {
      change (item, idx) {
        console.log(this.urlList[idx])
        let url = this.urlList[idx]
        this.$router.replace(url)
      },
      _initHomeScroll () {
        this.homeScroll = new BScroll(this.$refs.home)
      }
    }
  }
</script>

<style scoped lang="stylus">
  .home
    position: fixed
    left 0
    top 0
    right 0
    bottom 50px
    .ly-tab
      background #fff

</style>
